<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>商品统计</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/mui.picker.min.css" />
		<style type="text/css">
			.timebox button {
				float: left;
			}
		</style>
	</head>

	<body>

		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">商品统计</h1>
		</header>
		<div style="margin-top: 50px; padding: 10px 10px;">
			<div id="segmentedControl" class="mui-segmented-control">
				<a class="mui-control-item mui-active" href="#item1">
					日
				</a>
				<a class="mui-control-item" href="#item2">
					月
				</a>
				<a class="mui-control-item" href="#item3">
					年
				</a>
			</div>
		</div>
		<div>
			<div id="item1" class="mui-control-content mui-active">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell beginTime">开始日期 <span class="mui-badge mui-badge-primary"></span></li>
					<li class="mui-table-view-cell endTime">结束日期 <span class="mui-badge mui-badge-primary"></span></li>
				</ul>
				<button type="button" class="mui-btn mui-btn-primary mui-btn-block dataBtn">确定</button>
			</div>
			<div id="item2" class="mui-control-content">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell beginTime">开始月份 <span class="mui-badge mui-badge-primary"></span></li>
					<li class="mui-table-view-cell endTime">结束月份 <span class="mui-badge mui-badge-primary"></span></li>
				</ul>
				<button type="button" class="mui-btn mui-btn-primary mui-btn-block dataBtn">确定</button>
			</div>
			<div id="item3" class="mui-control-content">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell beginTime">开始年份 <span class="mui-badge mui-badge-primary"></span></li>
					<li class="mui-table-view-cell endTime">结束年份 <span class="mui-badge mui-badge-primary"></span></li>
				</ul>
				<button type="button" class="mui-btn mui-btn-primary mui-btn-block dataBtn">确定</button>

			</div>

		</div>

		<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
		<div id="main" style="margin: 60px auto 50px;width:100%;min-height:500px;"></div>

		<script src="../../js/mui.min.js"></script>
		<script src="../../js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.picker.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
		</script>

		<script type="text/javascript">
			mui.init();　
			mui.plusReady(function() {; //7天前日期			
				getMsg(getDay(-6) + "-00-00-00", getDay(0) + "-23-59-59", "3");
				jQuery('.beginTime span').html(getDay(-6));
				jQuery('.endTime span').html(getDay(-0));
				//关闭等待框
				plus.nativeUI.closeWaiting();
				//显示当前页面
				mui.currentWebview.show();

				function getDay(day) {
					var today = new Date();
					var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;

					today.setTime(targetday_milliseconds); //注意，这行是关键代码

					var tYear = today.getFullYear();
					var tMonth = today.getMonth();
					var tDate = today.getDate();
					tMonth = doHandleMonth(tMonth + 1);
					tDate = doHandleMonth(tDate);
					return tYear + "-" + tMonth + "-" + tDate;
				}

				function doHandleMonth(month) {
					var m = month;
					if(month.toString().length == 1) {
						m = "0" + month;
					}
					return m;
				}
				var index = 0;
				var showType = "3";
				var year, month, day, beginYear, beginMonth, beginDay, endYear, endMonth, endDay, beginTime, endTime;

				function getData() {
					var myDate = new Date();
					year = myDate.getFullYear();
					month = myDate.getMonth() + 1;
					month < 10 ? month = "0" + month : month = month;
					day = myDate.getDate();
					day < 10 ? day = "0" + day : day = day;
				}
				getData();

				mui('#segmentedControl').on('tap', '.mui-control-item', function(event) {
					getData();
					index = jQuery(this).index();
					console.log(year + "-" + month + "-" + day)
					console.log(index)
					switch(index) {
						case 0:
							showType = 3;
							getMsg(getDay(-6) + "-00-00-00", getDay(-0) + "-23-59-59", "3");
							jQuery('.beginTime span').html(getDay(-6));
							jQuery('.endTime span').html(getDay(-0));
							break;
						case 1:
							showType = 2;
							month1 = Number(month) - 1;
							month1 < 1 ? month1 = 1 : month1 = month1;
							month1 < 10 ? month1 = "0" + month1 : month1 = month1;
							getMsg(year + "-" + month1 + "-01-00-00-00", year + "-" + month + "-31-24-59-59", showType)
							jQuery('.beginTime span').html(year + "-" + month1);
							jQuery('.endTime span').html(year + "-" + month);

							break;
						case 2:
							showType = 1;
							getMsg(year - 1 + "-01-01-00-00-00", year + "-12-31-24-59-59", showType)
							jQuery('.beginTime span').html(year - 1);
							jQuery('.endTime span').html(year);
							break;
						default:
							alert("出现故障，请联系客服");
							break;
					}
				})

				jQuery('.beginTime,.endTime').click(function() {
					if(jQuery(this).hasClass("beginTime")) {
						var thisDom = jQuery(".beginTime").find("span");
					} else if(jQuery(this).hasClass("endTime")) {
						var thisDom = jQuery(".endTime").find("span");
					}
					var myDate = new Date();
					switch(index) {
						case 0:
							showType = 3;
							myDate.setFullYear(year, month, day);
							var dtpicker = new mui.DtPicker({
								type: "date", //设置日历初始视图模式 
								beginDate: new Date(2018, 06, 01), //设置开始日期 
								endDate: myDate, //设置结束日期 
								labels: ['Year', 'Mon', 'Day'], //设置默认标签区域提示语 				
							})
							dtpicker.show(function(e) {
								console.log(JSON.stringify(e));
								dataYear = e.y.value;
								dataMonth = e.m.value;
								dataDay = e.d.value;
								console.log(dataYear + dataMonth + dataDay);
								thisDom.html(dataYear + "-" + dataMonth + "-" + dataDay)
							})
							break;
						case 1:
							showType = 2;
							myDate.setFullYear(year, month);
							var dtpicker = new mui.DtPicker({
								type: "month", //设置日历初始视图模式 
								beginDate: new Date(2018, 06), //设置开始日期 
								endDate: myDate, //设置结束日期 
								labels: ['Year', 'Mon'], //设置默认标签区域提示语 				
							})
							dtpicker.show(function(e) {
								console.log(JSON.stringify(e));
								dataYear = e.y.value;
								dataMonth = e.m.value;
								thisDom.html(dataYear + "-" + dataMonth)
							})
							break;
						case 2:
							showType = 1;
							myDate.setFullYear(year);
							var dtpicker = new mui.DtPicker({
								type: "year", //设置日历初始视图模式 
								beginDate: new Date(2017), //设置开始日期 
								endDate: myDate, //设置结束日期 
								labels: ['Year'], //设置默认标签区域提示语 				
							})
							dtpicker.show(function(e) {
								console.log(JSON.stringify(e));
								dataYear = e.y.value;
								thisDom.html(dataYear)
							})
							break;
						default:
							alert("网络异常")
							break;
					}

				})
				jQuery(".dataBtn").click(function() {
					showType = Number(showType)
					switch(showType) {
						case 1:
							beginTime = jQuery('.beginTime span').html() + "-01-01-00-00-00";
							endTime = jQuery('.endTime span').html() + "-12-31-23-59-59";

							break;
						case 2:
							beginTime = jQuery('.beginTime span').html() + "-01-00-00-00";
							endTime = jQuery('.endTime span').html() + "-31-23-59-59";

							break;
						case 3:
							beginTime = jQuery('.beginTime span').html() + "-00-00-00";
							endTime = jQuery('.endTime span').html() + "-23-59-59";

							break;
						default:
							break;
					}
					getMsg(beginTime, endTime, showType);
				})

				function getMsg(beginTime, endTime, showType) {
					console.log(beginTime)
					console.log(endTime)
					console.log(showType)
					mui.ajax(url + "/app/statistics/goods?token=" + localStorage.getItem("token"), {
						data: {
							beginTime: beginTime,
							endTime: endTime,
							showType: showType,
							deviceNo: jQuery('.deviceNo').val()
						},
						dataType: 'json', //服务器返回json格式数据
						type: 'post', //HTTP请求类型
						timeout: 10000, //超时时间设置为10秒；
						headers: {
							'Content-Type': 'application/json'
						},
						success: function(data) {
							//服务器返回响应，根据响应结果，分析是否登录成功；
							console.log(JSON.stringify(data));

							var legendData = [];
							var seriesData = [];
							var dateData = [];
							var goodsData = [];
							if(data.code == 0) {
								data.data.forEach(function(value, index) {
									legendData.push(value.goodsName);
									legendData = legendData.filter(function(element, index, self) {
										return self.indexOf(element) === index;
									});
								});
								console.log(legendData);
								jQuery('#main').css("height", 15 * legendData.length + "px")
								var asd = ["a0", "a1", "a2", "a3", "a4", "a5", "a6", "a7", "a8", "a9", "a10", "a11", "a12", "a13", "a14", "a15", "a16", "a17", "a18", "a19", "a20", "a21", "a22", "a23", "a24", "a25", "a26", "a27", "a28", "a29", "a30", "a31", "a32", "a33", "a34", "a35", "a36", "a37", "a38", "a39", "a40", "a41", "a42", "a43", "a44", "a45", "a46", "a47", "a48", "a49"];
								legendData.forEach(function(val, i) {
									asd[i] = [];
									data.data.forEach(function(value, index) {
										if(value.goodsName == val) {
											var num1, num2;
											if(value.wechatOrderTotal) {
												num1 = Number(value.wechatOrderTotal);
											} else {
												num1 = 0;
											}
											if(value.alipayOrderTotal) {
												num2 = Number(value.alipayOrderTotal);
											} else {
												num2 = 0;
											}
											asd[i].push(num1 + num2);
											if(i < 1) {
												if(value.payTime.length > 5) {
													dateData.push(value.payTime.slice(5));
												} else {
													dateData.push(value.payTime);
												}
											}

										}

									})
									var totalNum = 0;
									asd[i].forEach(function(val, i) {
										totalNum += Number(val);
									})
									seriesData.push(totalNum)
								});
								console.log(JSON.stringify(asd))
								console.log(JSON.stringify(seriesData))

								showEcharts(legendData, seriesData, dateData);

								function showEcharts(legendData, seriesData, dateData) {
									//				echart
									// 基于准备好的dom，初始化echarts实例
									var myChart = echarts.init(document.getElementById('main'));
									var seriesLabel = {
										normal: {
											show: true,
											textBorderColor: '#333',
											textBorderWidth: 2
										}
									}
									var option = {
										tooltip: {
											trigger: 'axis',
											axisPointer: {
												type: 'shadow'
											}
										},
										xAxis: {
											type: 'value'
										},
										yAxis: {
											type: 'category',
											data: legendData
										},

										grid: {
											left: '3%',
											right: '4%',
											bottom: '3%',
											containLabel: true
										},
										series: [{
											data: seriesData,
											label: seriesLabel,
											type: 'bar'

										}]
									};
									// 使用刚指定的配置项和数据显示图表
									myChart.setOption(option);
									myChart.on('datazoom', function(params) {
										//params里面有什么，可以打印出来看一下就明白
										//可以通过params获取缩放的起止百分比，但是鼠标滚轮和伸缩条拖动触发的params格式不同，所以用另一种方法
										//获得图表数据数组下标
										var startValue = myChart.getModel().option.dataZoom[0].startValue;
										var endValue = myChart.getModel().option.dataZoom[0].endValue;
										//获得起止位置百分比
										var startPercent = myChart.getModel().option.dataZoom[0].start;
										var endPercent = myChart.getModel().option.dataZoom[0].end;

									})
									//							自适应
									window.onresize = myChart.resize;
								}
							} else if(data.code == 500 && data.msg == "令牌已经失效,请重新登录") {
								plus.nativeUI.toast('登录信息已过期，请重新登录');
								mui.openWindow({
									url: '../../login.html',
									show: {
										autoShow: true
									}
								});
							} else {
								alert(data.msg)
							}
						},
						error: function(xhr, type, errorThrown) {
							//异常处理；
							console.log(type);
							console.log(JSON.stringify(errorThrown));
							plus.nativeUI.toast('网络连接错误，请重新登录');
							mui.openWindow({
								url: '../../login.html',
								show: {
									autoShow: true
								}
							});
						}
					});
				}

			})
		</script>
	</body>

</html>